<template>
    <el-container>
        <my/>
        <el-head><el-button size="mini" @click="add()">添加</el-button></el-head>

        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="isbn"
                        label="isbn"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="bookName"
                        label="书名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editEmp(scope)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-dialog
                    title="提示"
                    :visible.sync="addVisible"
                    width="40%"

            >
                <!--:model:绑定表单数据-->
                <el-form label-width="80px" :model="addForms" :rules="addRules" status-icon ref="ruleForm"
                         class="demo-ruleForm" id="addForm">

                    <el-form-item label="isbn" prop="isbn">
                        <el-input v-model="addForms.isbn"></el-input>
                    </el-form-item>
                    <el-form-item label="书名" prop="bookName">
                        <el-input v-model="addForms.bookName"></el-input>
                    </el-form-item>

                    <el-form-item label="价格" prop="price">
                        <el-input v-model="addForms.price"></el-input>
                    </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogClose()">取 消</el-button>
                        <el-button type="primary" @click="confirmadd()"
                                   v-if="addForms.isbn!=='' & addForms.bookName!=='' & addForms.price!==''" >添加</el-button>

                      </span>
            </el-dialog>


            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="40%"

            >
                <!--:model:绑定表单数据-->
                <el-form label-width="80px" :model="editForms" :rules="editRules" status-icon ref="ruleForm"
                         class="demo-ruleForm" id="editForm">

                    <el-form-item label="isbn" prop="isbn">
                        <el-input v-model="editForms.isbn"></el-input>
                    </el-form-item>
                    <el-form-item label="书名" prop="bookName">
                        <el-input v-model="editForms.bookName"></el-input>
                    </el-form-item>

                    <el-form-item label="价格" prop="price">
                        <el-input v-model="editForms.price"></el-input>
                    </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible=false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate()"
                                   v-if="editForms.isbn!=='' & editForms.bookName!=='' & editForms.price!==''" >确认修改</el-button>

                      </span>
            </el-dialog>
        </el-main>
        <el-footer>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        </el-footer>
    </el-container>



</template>


<script>
    import my from '../components/my'
    export default {
        name: "Test",
        components:{my},
        data(){
            return{
                tableData: [],
                formData:{},
                //当前页
                currentPage: 1,
                //分页之后多少条
                pageSize: 5,
                total: 0,
                editForms: {},
                addForms:{},
                addVisible: false,
                dialogVisible: false,
                editRules: {
                    isbn: [
                        {required: true, message: 'isbn为空', trigger: 'blur'}
                    ],
                    bookName: [
                        {required: true, message: '书名为空', trigger: 'blur'}
                    ],
                    price: [
                        {required: true, message: '价格为空', trigger: 'blur'}
                    ]

                },
                addRules: {
                    isbn: [
                        {required: true, message: 'isbn为空', trigger: 'blur'}
                    ],
                    bookName: [
                        {required: true, message: '书名为空', trigger: 'blur'}
                    ],
                    price:[
                        {required: true, message: '价格为空', trigger: 'blur'}
                    ]

                },
            }
        },
        created() {
            this.initTable();
        },methods:{
            dialogClose(){
                this.addVisible = false
                this.addForms=''
            },
            add(){
                this.addVisible = true;
            },confirmadd() {
                this.$book.post("http://localhost:7002/mp/insertone",this.addForms).then(result => {
                    console.log(this.addForms)
                    if (result.data.code === 200) {
                        this.$message.success("添加成功")

                        this.initTable();
                        this.dialogClose();
                    }

                })
            },

            del(row){
                console.log(row)
                this.$book.post("http://localhost:7002/mp/deleteByisbn?isbn="+row.row.isbn).then(resp => {
                    if (resp.data.code===200){
                        this.$message.success("删除")
                        this.initTable();
                    }
                })

            },
            cancel(){
                this.dialogVisible=false;
                this.initTable();
            },
            editEmp(row) {
                this.dialogVisible = true;
                this.editForms = JSON.parse(JSON.stringify(row.row));

            },
            confirmUpdate() {
                this.$book.post("http://localhost:7002/mp/updateone" , this.editForms).then(result => {
                    console.log(this.editForms)
                    if (result.data.code === 200) {
                        this.$message.success("修改成功")

                        this.dialogVisible = false
                        this.initTable();
                    }

                })
            },
            handleSizeChange(val) {
                console.log(val)
                console.log(`每页:${val}条`);
                this.pageSize = val;
                this.initTable();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.initTable();
            },
            initTable(){
                this.$book.post("http://localhost:7002/mp/findall?current=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.data.code===200){
                    this.tableData=resp.data.data.records
                    console.log(this.tableData)
                        this.total = resp.data.data.total;
                    }else if (resp.data.code===4001){
                        this.$router.push("/")
                        this.$message.error("未登录")
                    }
                })
            }

        }
    }
</script>

<style scoped>

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>